<template>
  <div>
    <div class="category">
      <!-- 标签 -->
      <div>
        <span
          :class="tagActive.tagId == tag.tagId ? 'tag_active' : ''"
          v-for="(tag, key) in musicTags"
          :key="key"
          @click="changeTagValue(tag.tagId, tag.tagName)"
        >
          {{ tag.tagName }}
        </span>
      </div>

      <!-- 按钮 -->
      <div class="btns">
        <el-button round size="medium" v-remove-focus
          ><i class="el-icon-video-play"></i> <span>播放全部</span>
        </el-button>
        <el-button round size="medium" v-remove-focus>
          <i class="el-icon-folder-add"></i> <span>收藏全部</span>
        </el-button>
      </div>
    </div>

    <div class="newsongs">
      <ol>
        <li
          v-for="(newSong, key) in newSongs"
          :key="key"
          @dblclick="playSong(newSong, newSongs)"
        >
          <div class="index">
            <p>{{ newSong.index | indexTimeFilter }}</p>
          </div>
          <el-image
            style="width: 80px; height: 80px"
            :src="newSong.picUrl"
            fit="fill"
          ></el-image>
          <div class="name">
            <p>{{ newSong.name }}</p>
          </div>
          <div class="artistname">
            <p>{{ newSong.artistname }}</p>
          </div>
          <div class="album">
            <p>{{ newSong.album }}</p>
          </div>
          <div class="time">
            <p>{{ newSong.time | songTimeFilter }}</p>
          </div>
        </li>
      </ol>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  data() {
    return {
      // 默认音乐标签
      musicTags: [
        { tagName: '全部', tagId: '0' },
        { tagName: '华语', tagId: '7' },
        { tagName: '欧美', tagId: '96' },
        { tagName: '日本', tagId: '8' },
        { tagName: '韩国', tagId: '16' },
      ],
      // 当前标签
      tagActive: {
        tagId: '0',
        tagName: '全部',
      },
      //   歌曲列表
      newSongs: [],
    }
  },
  created() {
    this.getNewSongsList()
  },
  watch: {
    'tagActive.tagId': function (newVal, oldVal) {
      this.getNewSongsList()
    },
  },
  filters: {
    // 歌曲时间过滤器
    songTimeFilter: function (val) {
      const dt = new Date(val)
      // 分秒
      const mm = (dt.getMinutes() + '').padStart(2, '0')
      const ss = (dt.getSeconds() + '').padStart(2, '0')

      return `${mm}:${ss}`
    },

    // 序号过滤器
    indexTimeFilter: function (val) {
      let index = val + 1
      index = (index + '').padStart(2, '0')
      return index
    },
  },
  methods: {
    ...mapMutations(['changeMusicPlayInfo']),

    //   获取新歌速递列表
    async getNewSongsList() {
      const { data: res } = await this.$http({
        url: `/top/song?type=${this.tagActive.tagId}`,
        withCredentials: true, //关键
      })
      //   console.log(res)

      let tempListDatas = []
      let index = 0
      for (const item of res.data) {
        if (index >= 16) {
          break
        }
        let listObj = {}

        listObj.id = item.id
        listObj.time = item.duration
        listObj.name = item.name
        listObj.album = item.album.name
        listObj.picUrl = item.album.picUrl

        let str = ''
        for (let i = 0; i < item.artists.length; i++) {
          str = str + item.artists[i].name
          if (i != item.artists.length - 1) {
            str = str + '/'
          }
        }
        listObj.artistname = str

        listObj.index = index
        index++
        tempListDatas.push(listObj)
      }

      this.newSongs = tempListDatas
      //   console.log(this.newSongs)
    },
    // 改变标签值，重新获取列表
    changeTagValue(id, name) {
      this.tagActive.tagId = id
      this.tagActive.tagName = name
    },
    // 播放歌曲
    playSong(row, list) {
      let thePlaySongInfo = row
      let thePlaySongListInfo = list

      const info = {
        thePlaySongInfo,
        thePlaySongListInfo,
      }

      this.changeMusicPlayInfo(info)
    },
  },
}
</script>

<style lang="less" scoped>
.category {
  position: relative;
  padding-top: 10px;
  padding-bottom: 14px;
  display: flex;
  justify-content: space-between;
  > div {
    > span {
      padding: 0px 6px;
      font-size: 15px;
      color: #373737;
      cursor: pointer;
    }
    > span.tag_active {
      color: black;
      font-weight: bold;
    }
  }
  .btns {
    .el-button {
      padding: 3px 12px;
      position: relative;
      i {
        font-size: 20px;
      }
      span {
        position: relative;
        top: -2px;
      }
    }
    .el-button:nth-child(odd) {
      background-color: #ec4141;
      color: white;
    }
  }
}

.newsongs {
  ol {
    list-style: none;
    margin: 0;
    padding: 0;
    li {
      display: flex;
      padding: 10px;
      > .index {
        width: 30px;
        color: #959595;
      }
      > .el-image {
        border-radius: 12px;
        margin: 0 10px;
      }
      > .name {
        width: 270px;
        p {
          width: 160px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      > .artistname {
        width: 185px;
        color: #959595;
        p {
          width: 170px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      > .album {
        width: 250px;
        color: #959595;
        p {
          width: 240px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      > .time {
        color: #959595;
        width: 60px;
      }
      > div {
        position: relative;
        p {
          position: relative;
          top: 16px;
        }
      }
    }
    li:nth-child(odd) {
      background-color: #f3f1f1;
    }
    li:hover {
      background-color: #f8ab8d67;
    }
  }
}
</style>